用纯色填充图形

使用 fillStyle 设置填充样式 , ctx.fillStyle = ' 颜色 '; 默认的填充样式是不透明的黑色

✂️

ctx.fillRect(x, y, width, height);

使用渐变色填充

创建线性渐变是

✂️

createLinearGradient(), createLinearGradient(x1, y1, x2, y2);
addColorStop(position, color);

addColorStop 的位置参数，是介于 0 - 1 之间的数字，可以是两位小数，表示百分比其中参数 position 为渐变中色标的相对位置（或称"偏移值"），必须是一个从 0~1 的浮点值。渐变起点的偏移值为 0 ，终点的偏移值为 1 。如果 position 值为 0.5 ，则表示色标会出现在渐变的正中间。

fillRect 与 strokeRect 画出的都是独立的路径。

✂️

html

<body>
  <canvas
    id="this_101"
    style="border: 1px
solid;"
    width="300"
    height="300"
  ></canvas>
</body>
<script>
  var canvas = document.querySelector('#this_101');
  var ctx = canvas.getContext('2d');
  var o = ctx.createLinearGradient(0, 0, 0, 200);
  o.addColorStop(0, '#ff0000');
  o.addColorStop(1 / 7, '#ff9900');
  o.addColorStop(2 / 7, '#ffff00');
  o.addColorStop(3 / 7, '#00ff00');
  o.addColorStop(4 / 7, '#00ffff');
  o.addColorStop(5 / 7, '#0000ff');
  o.addColorStop(6 / 7, '#ff00ff');
  o.addColorStop(1, '#ff0000');
  ctx.fillStyle = o;
  ctx.strokeStyle = o;
  ctx.fillRect(10, 10, 200, 200);
</script>

绘制径向渐变

如果要绘制径向渐变，则首先需要使用 createRadialGradient 方法创建 canvasGradient 对象，然后使用 addColorStop 方法进行上色。

✂️

context.createRadialGradient(x1, y1, r1, x2, y2, r2);

其中参数 x1 、 y1 、 r1 定义一个以（ x1,y1 ）为原点、半径为 r1 的圆， x2 、 y2 、 r2 定义一个以（ x2,y2 ）为原点、半径为 r2 的圆。例如，可以像下面这样来创建一个 canvasGradient 对象用于绘制径向渐变。然后即可使用 addColorStop 方法定义色标的位置并进行上色。

✂️

html

<body>
  <canvas
    id="this_101"
    style="border: 1px
solid;"
    width="300"
    height="300"
  ></canvas>
</body>
<script>
  var canvas = document.querySelector('#this_101');
  var ctx = canvas.getContext('2d');
  var o = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);
  o.addColorStop(0, '#ffffff');
  o.addColorStop(0.75, '#333333');
  o.addColorStop(1, '#000000');
  ctx.fillStyle = o;
  ctx.fillRect(10, 10, 200, 200);
</script>

绘制图案

createPattern 方法用来实现图案效果，使用起来非常方便

✂️

context.createPattern(image, 'repeat|repeat-x|repeat-y|no-repeat');

设置图形的透明度

使用 globalAlpha 全局属性可以设置绘图图形的不透明度，另外也可以使用色彩的不透明参数来设置。

创建阴影

context.shadowOffsetX 用于设置或返回阴影形状的水平距离
context.shadowOffsetY 用于设置或返回阴影形状的垂直距离
context.shadowBlur 设置或返回用于阴影的模糊级别
context.shadowColor 设置或返回用于阴影的颜色

其中， shadowOffsetX 为阴影的水平偏移， shadowOffsetY 为阴影的垂直偏移，默认值都是 0 ，正值表示向下或向右延伸，负值表示向上或向左延伸。 shadowBlur 为阴影羽化的程度，默认值为 0 ，其数值与像素数量无关，也不受矩阵变换的影响。 shadowColor 为阴影的颜色，可以指定为一个 CSS 字符串或 Web 样式字符串，并且可以包含一个 alpha 部分来表示透明度，默认值是黑色。